<div x-data>
  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div x-ref="toast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto" x-text="$store.toast.title"></strong>
        <small>just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body" x-html="$store.toast.html">
      </div>
    </div>
  </div>
</div>


<div x-data>
  <div class="modal fade" x-ref="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" x-text="$store.modal.title"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p x-html="$store.modal.html"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Got it!</button>
        </div>
      </div>
    </div>
  </div>
</div>
